<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('invitation.yqhy')" :leftIcon="true" :rightIcon="'histroy'" @clickRight="clickRight"></navbar>
		
		<!-- 邀请卡片 -->
		<view class="invitation-card">
			<image class="invitation-icon" src="/static/icon/bg2.svg" mode="aspectFit"></image>
			<view class="invitation-buttons">
				<view class="invitation-code">
					<text>{{ invitationCode || 'Loading...' }}</text>
				</view>
				<view class="copy-btn" @click="copyInviteCode">
					<text>{{ t('invitation.fzhy') }}</text>
				</view>
				<view class="copy-link-btn" @click="copyInviteLink">
					<text>{{ t('invitation.fzlj') }}</text>
				</view>
			</view>
		</view>
		
		<!-- 邀请说明 -->
		<view class="invitation-info">
			<view class="info-title">
				<text>{{ t('invitation.yqsm') }}</text>
			</view>
			<view class="info-content">
				<view class="info-item">
					<text class="item-text">1.{{ t('invitation.yqnr1') }}</text>
				</view>
				<view class="info-item">
					<text class="item-text">2.{{ t('invitation.yqnr2') }}</text>
				</view>
				<view class="info-item">
					<text class="item-text">3.{{ t('invitation.yqnr3') }}</text>
				</view>
				<view class="info-item">
					<text class="item-text">4.{{ t('invitation.yqnr4') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useI18n } from 'vue-i18n';
	import { ref, onMounted, computed } from 'vue';
	import { TokenManager } from '@/utils/token.js';
	
	const { t, locale } = useI18n();
	
	// 邀请码响应式变量
	const invitationCode = ref('');
	
	// 获取当前站点域名
	const getCurrentDomain = () => {
		// 在H5环境下获取当前域名
		if (typeof window !== 'undefined') {
			return window.location.origin;
		}
		// 默认域名（可以根据实际情况修改）
		return 'https://trade-ties.com';
	};
	
	// 计算推广链接
	const inviteLink = computed(() => {
		if (!invitationCode.value) return '';
		return `${getCurrentDomain()}/#/pages/account/register?invite=${invitationCode.value}`;
	});
	
	// 页面加载时获取邀请码
	onMounted(() => {
		const storedCode = TokenManager.getInvitationCode();
		if (storedCode) {
			invitationCode.value = storedCode;
		} else {
			// 如果没有存储的邀请码，使用默认值（可以考虑从API重新获取）
			invitationCode.value = 'Ejk89g';
		}
	});
	// navbar右侧图标点击事件
	const clickRight =()=>{
		uni.navigateTo({
			url:"/pages/home/invitationHistroy"
		})
	}
	
	// 复制邀请码
	const copyInviteCode = () => {
		if (!invitationCode.value) {
			uni.showToast({
				title: '邀请码未加载',
				icon: 'none'
			});
			return;
		}
		
		uni.setClipboardData({
			data: invitationCode.value,
			success: function() {
				uni.showToast({
					title: t('common.fzcg'),
					icon: 'none'
				});
			}
		});
	}
	
	// 复制邀请链接
	const copyInviteLink = () => {
		if (!inviteLink.value) {
			uni.showToast({
				title: '邀请链接未生成',
				icon: 'none'
			});
			return;
		}
		
		uni.setClipboardData({
			data: inviteLink.value,
			success: function() {
				uni.showToast({
					title: t('common.fzcg'),
					icon: 'none'
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
	
	.invitation-card {
		position: relative;
		width: 100%;
		background: rgba(2, 124, 217, 0.5);
		margin-top: 26.93rpx;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80.22rpx 83.71rpx;
		box-sizing: border-box;
	}
	
	.invitation-icon {
		width: 409.91rpx;
		height: 332.29rpx;
		margin-bottom: 64.53rpx;
	}
	
	.invitation-buttons {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	
	.invitation-code {
		background-color: #FFFFFF;
		padding: 16.67rpx 45.34rpx;
		border-radius: 26.16rpx;
		
		text {
			font-size: 27.91rpx;
			font-weight: 300;
			color: #000;
		}
	}
	
	.copy-btn, .copy-link-btn {
		background-color: #3081EC;
		padding: 16.67rpx 45.34rpx;
		border-radius: 26.16rpx;
		text-align: center;
		
		text {
			color: #fff;
			font-size: 27.91rpx;
			font-weight: 300;
		}
	}
	
	.copy-link-btn {
		margin-right: 0;
	}
	
	.invitation-info {
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.info-title {
		margin-bottom: 30rpx;
		
		text {
			font-size: 31.4rpx;
			font-weight: 500;
			color: #000000;
		}
	}
	
	.info-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.info-item {
		display: flex;
		align-items: flex-start;
	}
	.item-text {
		font-size: 27.91rpx;
		color: #323233;
		font-weight: 300;
		line-height: 1.5;
		flex: 1;
	}
</style>